
import React, { } from 'react'
import { Router } from 'react-router' // react-router-dom 是基于 react-router 的

/**
 * 函数式组件\
 * 接收一个 redux 版本的 history 
 */
export function HistoryRouter({ history, children }) {
  const [state, setState] = React.useState({
    action: history.action, // 动作
    location: history.location, // 路径对象
  })
  React.useEffect(() => {
    // 监听路径变化 当路径发生变化后 把最新的路径和动作作为 setState 的参数
    history.listen(({ action, location }) => {
      setState({ action, location })
    })
  }, [])
  return <Router
    location={state.location}
    action={state.action}
    navigator={history}
    navigationType={state.action}
  >
    {children}
  </Router>
}
